﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科学计算器</title>
    <link rel="stylesheet" href="Css/cacul.css">
</head>
<body>
    <div class="calculator-title">科学计算器</div>

    <div class="calculator-container">
        <div class="display">
            <button class="history-btn">📜</button>
            <div class="calculation"></div>
            <div class="result">0</div>
            <div class="history-panel">
                <div class="history-title">
                    <h3>计算历史</h3>
                    <button class="close-history">✕</button>
                </div>
                <ul class="history-list"></ul>
            </div>
        </div>
        <div class="keypad">
            <button class="clear">C</button>
            <button class="backspace">⌫</button>
            <button class="memory" data-action="mc">MC</button>
            <button class="memory" data-action="mr">MR</button>

            <button class="operator" data-value="7">7</button>
            <button class="operator" data-value="8">8</button>
            <button class="operator" data-value="9">9</button>
            <button class="operator" data-operator="/">÷</button>

            <button class="operator" data-value="4">4</button>
            <button class="operator" data-value="5">5</button>
            <button class="operator" data-value="6">6</button>
            <button class="operator" data-operator="*">×</button>

            <button class="operator" data-value="1">1</button>
            <button class="operator" data-value="2">2</button>
            <button class="operator" data-value="3">3</button>
            <button class="operator" data-operator="-">-</button>

            <button class="operator" data-value="0">0</button>
            <button class="operator" data-value=".">.</button>
            <button class="operator" data-operator="%">%</button>
            <button class="operator" data-operator="+">+</button>

            <button class="memory" data-action="ms">MS</button>
            <button class="memory" data-action="m+">M+</button>
            <button class="memory" data-action="m-">M-</button>
            <button class="equals">=</button>
            <a class="back_1"  href="./index.html">返回登录</a>
        </div>
    </div>

    <div class="instructions">
        <h3>使用说明</h3>
        <ul>
            <li>点击数字和运算符进行计算</li>
            <li>使用键盘输入：数字键、+、-、*、/</li>
            <li>按Enter或=键计算结果</li>
            <li>按C键清除，按Backspace键退格</li>
            <li>点击📜查看计算历史</li>
        </ul>
    </div>

    <!-- 外部JS文件 -->
    <script src="Js/caculator.js"></script>
</body>
</html>